《ES6学习2》 变量的解构赋值

ES6可以从数组和对象中提取值，然后对变量进行赋值。解构赋值的分类：数组解构赋值、对象解构赋值 、字符串解构赋值、数值解构赋值、布尔值解构赋值、 函数参数解构赋值。

1 数组的解构赋值

1.1 基本用法

let [a, b, c] = [1, 2, 3];
//等同于
let a = 1;
let b = 2;
let c = 3;

如上所示，只要等号两边的模式相同，左边的变量就会被赋予右边对应的值。还可以使用嵌套数组进行结构。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [x, , y] = [1, 2, 3];
x // 1
y // 2

1.2 解构不成功

如果结构不成功，变量的值就等于undefined。

let [x, y, ...z] = ["a"];
x // "a"
y // undefined
z // []

//以下两种情况，foo的值都等于undefined。
let [foo] = [];
let [bar, foo] = [1];

1.3 不完全解构

即等号左边的模式只匹配一部分等号右边的数组，依然可以解构成功。

let[x, y] = [1, 2, 3];
x // 1
y // 2

//嵌套情况
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
c // 4

1.4 默认值

解构赋值允许设置默认值，当数组成员严格等于undefined，默认值将生效。

let [x = 1] = [undefined];
x // 1
let [y = 1] = [null];
y // null

2 对象的解构赋值

解构同样适用于对象。

let {foo, bar, barz} = {foo: "aaa", bar: "bbb"};
foo // "aaa"
bar // "bbb"
barz // undefined

对象的解构赋值实际上是先找到同名属性，然后再赋值给对应的变量,前者是匹配模式，后者才是真正的变量。

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

let obj = { first: "hello", last: "world" };
let { first: f, last: g } = obj;
f // "hello"
g // "world"
first // first id not undefined

解构也可以用于嵌套结构的对象

let obj = {
  p: [
    "hello",
    { y: "world" }
   ]
};

let { p, p: [x, { y }] } = obj;
x // "hello"
y // "world"
p //  ["hello", { y: "world" }]

对象的解构同样可以指定默认值

let { x = 1 } = {};
x // 1

3 字符串的解构赋值

字符串进行解构赋值时，会被转换成一个类数组对象。

const [a, b, c] = "red";
a // "r"
b // "e"
c // "d"

类数组对象的length属性也可以进行解构赋值

let { length: len } = "hello";
len // 5

4 数值和布尔值的解构赋值

解构赋值时，如果等号右边不是数组和对象，则会先转为对象，如果是undefined和null则无法转为对象，此时会报错。

let { toString: s } = 123;
s === Nunmber.prototype.toString // true;

let { toString: s } = true;
s === Boolean.prototype.toString // true;

let { prop : x } = undefined; // 报错
let { prop : y } = null; // 报错

5 函数参数的解构赋值

函数的参数也可以使用解构赋值和指定默认值

function add([x, y]){
  return x + y;
}
add([1,2]); // 3

function move({ x = 0, y = 0 } = {}) {
  return [x, y];
};
move({ x: 3, y: 8 }); // [3, 8]